<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        body{
            background-color: #f0f0f0;
        }
        ul{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        img{
            border:0;
        }
        .play{
            width: 400px;
            height: 430px;
            margin: 50px auto 0;
            background-color: #000;
            font: 12px Arial;
        }
        .big_pic{
            width: 400px;
            height: 320px;
            overflow: hidden;
            background: #222;
            position: relative;
        }
        .big_pic li{
            width: 400px;
            height: 320px;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
        }
        .mark_left{
            width: 200px;
            height: 320px;
            position: absolute;
            left: 0;
            top: 0;
            filter:alpha(opacity:10);
            opacity: 0.1;
            z-index: 3000;
        }
        .mark_right{
            width: 200px;
            height: 320px;
            position: absolute;
            left: 200px;
            top: 0;
            filter:alpha(opacity:10);
            opacity: 0.1;
            z-index: 3000;
        }
        .big_pic .prev{
            width: 60px;
            height: 60px;
            background: url("images/btn.gif")no-repeat;
            position: absolute;
            top: 130px;
            left: 10px;
            z-index: 3001;
            filter:alpha(opacity:0);
            opacity: 0;
            cursor: pointer;
        }
        .big_pic .next{
            width: 60px;
            height: 60px;
            background: url("images/btn.gif")no-repeat 0 0;
            position: absolute;
            top: 130px;
            right: 10px;
            z-index: 3001;
            filter:alpha(opacity:0);
            opacity: 0;
            cursor: pointer;
        }
        .big_pic .text{
            position: absolute;
            left: 10px;
            top: 302px;
            z-index: 3000;
            color: #ccc;
        }
        .big_pic .length{
            position: absolute;
            right: 10px;
            bottom: 4px;
            z-index: 3000;
            color: #ccc;
        }
        .big_pic .bg{
            width: 400px;
            height: 25px;
            background: #000;
            filter:alpha(opacity:60);
            opacity: 0.6;
            position: absolute;
            z-index: 2999;
            bottom: 0;
            left: 0;
        }
        .small_pic{
            width: 380px;
            height: 94px;

            position: relative;
            top: 7px;
            left: 10px;
            overflow: hidden;
        }
        .small_pic ul{
            height: 94px;
            position: relative;
            top: 0;
            left: 0;
        }
        .small_pic li{
            width: 120px;
            height: 94px;
            float: left;
            padding-right: 10px;
            background: url("images/loading.gif")no-repeat center center;
            cursor: pointer;
            filter:alpha(opacity:30);
            opacity: 0.3;
        }
        .small_pic img{
            width: 120px;
            height: 94px;
        }
    </style>
</head>
<body>
<div id="playimages" class="play">
    <ul class="big_pic">
        <div class="prev"></div>
        <div class="next"></div>
        <div class="text"></div>
        <div class="length"></div>
        <a href="javascrit:;" class="mark_left"></a>
        <a href="javascrit:;" class="mark_right"></a>
        <div class="bg"></div>
        <li style="z-index: 1"><img src="images/1.jpg" alt=""/></li>
        <li><img src="images/2.jpg" alt=""/></li>
        <li><img src="images/3.jpg" alt=""/></li>
        <li><img src="images/4.jpg" alt=""/></li>
        <li><img src="images/5.jpg" alt=""/></li>
        <li><img src="images/6.jpg" alt=""/></li>
    </ul>
    <div id="small_pic" class="small_pic">
        <ul style="width: 400px">
            <li style=" filter: alpha(opacity:100); opacity:1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

<script>
    //获取非行内样式
    var g_aImgInfo=
            [
                {info: "都市魅力"},
                {info: "古香古色"},
                {info: "沉浸舞步的舞者"},
                {info: "名贵跑车"},
                {info: "聆听天籁的精灵"},
                {info: "绚彩光芒"}
            ];
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        } else {
            return getComputedStyle(obj, false)[name];
        }
    }
    //运动框架
    function startMove(obj, arr, iTarget) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var cur = 0;
            if (arr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj, arr)) * 100);
            } else {
                cur = parseInt(getStyle(obj, arr));
            }
            var speed = (iTarget - cur) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            if (cur == iTarget) {
                clearInterval(obj.timer);
            } else {
                if (arr == 'opacity') {
                    obj.style.filter = 'alpha(opcity:' + (cur + speed) + ')';
                    obj.style.opacity = (cur + speed) / 100;


                } else {
                    obj.style[arr] = cur + speed + 'px';
                }
            }
        }, 30);
    }

    function getByClass(oParent, sClass) {
        var aEle = oParent.getElementsByTagName('*');
        var aResult = [];

        for (var i = 0; i < aEle.length; i++) {
            if (aEle[i].className == sClass) {
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }

    window.onload = function() {
        var oDiv = document.getElementById('playimages');
        var oBtnPrev = getByClass(oDiv, 'prev')[0];
        var oBtnNext = getByClass(oDiv, 'next')[0];
        var oMarkLeft = getByClass(oDiv, 'mark_left')[0];
        var oMarkRight = getByClass(oDiv, 'mark_right')[0];
        var oDivSmall = getByClass(oDiv, 'small_pic')[0];
        var oTxtInfo = getByClass(oDiv, 'text')[0];
        var oTxtLength = getByClass(oDiv, 'length')[0];
        var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
        var aLiSmall = oDivSmall.getElementsByTagName('li');
        var oUlBig = getByClass(oDiv, 'big_pic')[0];
        var aLiBig = oUlBig.getElementsByTagName('li');
        //为元素添加属性
        oTxtInfo.innerHTML = g_aImgInfo[0].info;
        console.log(g_aImgInfo[0].info);
        oTxtLength.innerHTML = '1/' + aLiSmall.length;
        var nowZIndex = 2;//全局变量用于控制zindex
        var now = 0;//全局变量，当前图片的位置
        oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + 'px';
        //添加事件
        oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {
            startMove(oBtnPrev, 'opacity', 100);

        };
        oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {
            startMove(oBtnPrev, 'opacity', 0);
        };
        oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
            startMove(oBtnNext, 'opacity', 100);
        };
        oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
            startMove(oBtnNext, 'opacity', 0);
        };
        for(var i=0;i<aLiSmall.length;i++){
            aLiSmall[i].index=i;
            aLiSmall[i].onclick=function(){
                if(this.index==now) return;
                now=this.index;
                tab()
            };
            aLiSmall[i].onmouseover = function() {
                startMove(this, 'opacity', 100);
            };
            aLiSmall[i].onmouseout = function() {
                if (this.index != now) {
                    startMove(this, 'opacity', 30);
                }
            };
        }
        //通用事件
        function tab(){
            aLiBig[now].style.zIndex=nowZIndex++;
            for(var i=0;i<aLiSmall.length;i++){
                startMove(aLiSmall[i],'opacity',30);
            }
            aLiBig[now].style.height=0;
            startMove(aLiBig[now],'height',320);
            startMove(aLiSmall[now],'opacity',100);
            if(now==0){
                startMove(oUlSmall,'left',0);
            }else if(now==aLiSmall.length-1){
                startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth);
            } else {
                startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth);
            }
            oTxtInfo.innerHTML=g_aImgInfo[now].info;
            oTxtLength.innerHTML=(now+1)+'/'+aLiSmall.length;
        }
        oBtnPrev.onclick=function(){
            now--;
            if(now==-1){
                now=aLiSmall.length-1;
            }
            tab();
        };
        oBtnNext.onclick=function(){
            now++;
            if(now==aLiSmall.length){
                now=0
            }
            tab();
        };
        //定时器
        var timer=setInterval(oBtnNext.onclick,2000);
        oDiv.onmouseover=function(){
            clearInterval(timer);
        };
        oDiv.onmouseout=function(){
            timer=setInterval(oBtnNext.onclick,2000);
        };
    };


</script>
</body>
</html>